<template>
	<view>
		<u-tabs :list="list4" :scrollable="false" lineWidth="40rpx" lineColor="#FB2D19" :activeStyle="{
      color: '#FB2D19'
    }" :inactiveStyle="{
  color: '#333333',
}" itemStyle="height: 88rpx;font-weight:600;background:#fff;" class="m-b-30 sticky top1" @click="tabClick">
		</u-tabs>

		<common-list @load="getLandlordContract" :list="list" :status="status">
			<template #list>
				<contract-item :data="item" v-for="(item, i) in list" :key="i" />
			</template>
			<template #empty>
				<empty text="暂无合同～"></empty>
			</template>
		</common-list>

		<view class="plus-circle-fill">
			<u-icon name="plus-circle-fill" color="#FB2D19" size="122rpx" @click="show = true"></u-icon>
		</view>

		<u-popup :show="show" @close="show = false" round="20" mode="bottom">
			<view>
				<view class="h-114 text-center lh-114 font-32 color-d border-bottom-999"
					@click="jump('/pages/contract/create-contract?type=2')">京瑞居房屋装修合同</view>
				<view @click="jump('/pages/contract/create-contract?type=1')" class="h-114 text-center lh-114 font-32 color-d">
					京瑞居房屋运营合同</view>
				<view class="h-16 back-color-h"></view>
				<view class="h-114 text-center lh-114 font-32 color-d" @click="show = false">取消</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import ContractItem from '@/components/home/ContractItem'
	export default {
		name: "contract",
		components: {
			ContractItem
		},
		data() {
			return {
				show: false,
				list4: [{
					name: '待签合同'
				}, {
					name: '已签合同'
				}],
				list: [],
				status: 'loading',
				page: 1,
				tabIndex: 1,
			}
		},
		onLoad() {
			this.getLandlordContract()
		},
		onReachBottom() {
			if (this.status === 'nomore') return
			this.getLandlordContract()
		},
		methods: {
			tabClick(item) {
				this.tabIndex = item.index + 1
				this.page = 1
				this.list = []
				this.getLandlordContract()
			},
			async getLandlordContract() {
				const {
					page,
					limit
				} = this
				let params = {
					page,
					limit,
					contract_status: this.tabIndex
				}
				this.status = 'loading'
				const res = await this.$api.common.landlord('getLandlordContract', params)
				if (res.code === 200) {
					const {
						count,
						list
					} = res.data
					this.list = [...this.list, ...list]
					if (this.list.length >= count) {
						// 所有数据加载完毕
						this.status = 'nomore'
						return
					}
					// 单次请求数据完毕
					this.status = 'loadmore'
					this.page = this.page + 1
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.plus-circle-fill {
		position: fixed;
		bottom: 176rpx;
		right: 60rpx;
		z-index: 1;
		width: 112rpx;
		height: 112rpx;
		border-radius: 50%;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.top1 {
		top: var(--window-top);
	}
</style>
